const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development' ? true : false;

const config = {
    target: 'web',
    entry: {
        index: path.join(__dirname, 'src/main.js'),
    },
    output: {
        filename: 'bundle.[hash:8].js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['react', 'es2015'],
                    plugins: ['syntax-dynamic-import']
                }
            },
            {
                test: /\.styl/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true // 使用前面的sourcemap
                        }
                    },
                    'stylus-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.(gif|png|jpg|jpeg|svg|ico)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/pages/pc/index.html'
        }),
        new HtmlWebpackPlugin({
            template: './src/pages/wap/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "main.[contenthash:8].css",
            chunkFilename: "main.[contenthash:8].css",
            ignoreOrder: false
        })
    ],
    resolve: {
        extensions: ['.js', '.json', '.jsx'],
        alias: { // 表示别名
            '@': path.join(__dirname, './src') // 这样，@ 就表示 项目根目录中 src 的这一层路径
        }
    }
};


if(isDev) {
    config.mode = 'development';
    // 调试排错 historyApiFallback如果为 true ，页面出错不会弹出 404 页面
    config.devtool = '#cheap-module-eval-source-map';
    config.devServer = {
        port: 8080,
        host: '0.0.0.0',
        overlay: {
            errors: true
        },
        hot: true,
        historyApiFallback: true
    };
    // 开启热加载
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    );
}else{
    config.mode = 'production';
    config.output.filename = 'bundle.[chunkhash:8].js';
    config.optimization =  {
        runtimeChunk: {
            name: "manifest"
        },
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    chunks: 'initial',
                    priority: -10,
                    reuseExistingChunk: false,
                    test: /[\\/]node_modules[\\/](vue)[\\/]/,
                },
                styles: {
                    name: 'styles',
                    test: /\.(scss|css|styl)$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    }
}

module.exports = config;
